<style lang="scss" scoped>
.user-card {
  width: 100%;
  max-height: 130px;
  display: flex;
  justify-content: center;
}

.right-container {
  width: 100%;
  height: 130px;
}
.user-info-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.avatar-container {
  margin-right: 10px;
}
.img-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.location-info {
  color: #00000073;
  font-size: 12px;
  font-weight: 400;
  font-family: 'PingFang SC';
}
.username {
  display: inline-block;
  margin-right: 10px;
  color: #000000d9;
  font-size: 16px;
  font-weight: 500;
  font-family: 'PingFang SC';
}
.user-data-title {
  display: inline-block;
  margin-right: 10px;
  color: #000000d9;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  line-height: 16px;
  font-family: 'Open Sans';
}
.user-data {
  color: #000000d9;
  font-size: 16px;
  font-weight: 500;
  font-family: 'PingFang SC';
}
</style>

<template>
  <div class="main-container">
    <el-row :gutter="0" justify="center">
      <!-- 左侧用户信息栏-->
      <el-col :span="12">
        <div class="user-card">
          <!-- 头像框 -->
          <div class="avatar-container">
            <el-avatar
              src="https://img-1317399392.cos.ap-guangzhou.myqcloud.com/img/d1b9d5aaca97d666f991d592fa704dd.jpg"
              :size="100"
            ></el-avatar>
          </div>

          <!-- 右侧信息栏 -->
          <div class="right-container">
            <div class="user-info-container">
              <div class="username-container">
                <div class="user-badge">
                  <span class="username">我是一个用户名</span>
                  <el-button type="danger" icon="Avatar" size="small" circle />
                  <el-button
                    type="success"
                    icon="HelpFilled"
                    size="small"
                    circle
                  />
                  <el-button type="warning" icon="Share" size="small" circle />
                </div>
              </div>
              <div class="location-info">中国大陆</div>

              <div class="fans-info">
                <span class="user-data-title"
                  ><span class="user-data">8612</span>声望</span
                >
                <span class="user-data-title"
                  ><span class="user-data">2.6k</span>粉丝</span
                >
                <span class="user-data-title"
                  ><span class="user-data">8612</span>作品</span
                >
              </div>
              <div>
                <el-button type="primary">关注</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧用户作品栏 -->
      <el-col :span="12">
        <div>
          <el-row :gutter="10">
            <el-col :span="8">
              <div class="img-container">
                <img :src="img_list[0]" alt="" />
              </div>
            </el-col>
            <el-col :span="8">
              <img :src="img_list[1]" alt="" />
            </el-col>
            <el-col :span="8">
              <img :src="img_list[2]" alt="" />
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-divider />
    </el-row>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import request from '../../../utils/axios';

const props = defineProps(['index']);
let final_arr = reactive([]);

let img_list = reactive([]);

onMounted(() => {
  request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: 1390,
    },
  }).then((res) => {
    // 对后端传回来的数据做处理
    let data = res.data.Carousels;
    let list = [];
    data.forEach((item) => {
      list.push(item);
    });
    final_arr = list.slice(props.index * 3, props.index * 3 + 3);
    final_arr.forEach((item) => {
      img_list.push(item.url);
    });
    console.log(img_list);
  });
});
</script>
